<template>
  <div>
    <a-row dense contentFullHeight fixedHeight >
      <a-col :span="3">
      <ShopCateGoryTree  @select="handleSelect" style="height: 99%"/>
      </a-col>
      <a-col :span="21">
      <BasicTable @register="registerTable"  :search-info="searchInfo" :rowSelection="rowSelection">
        <template #toolbar>
          <a-button type="primary" @click="handleCreate" > 新增商家 </a-button>
          <a-button type="primary" @click="handleOpenAccount(selectedRow)" :disabled="!hasSelectedRows"> 开通后台账户</a-button>
<!--         <a-button type="primary" @click="handleWechatSet(selectedRow)" :disabled="!hasSelectedRows"> 公众号设置 </a-button>-->
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                label: '编辑',
                onClick: handleEdit.bind(null, record),
              },
            ]"
            :dropDownActions="getDropDownAction(record)"
          />
        </template>
      </BasicTable>
      </a-col>
      <Drawer @register="registerDrawer" @success="reload" />
      <ShopWechatSetDrawer @register="registerShopWechatSetDrawer" />
      <ShopAccountDrawer @register="registerShopAccountDrawer" @success="handleSuccess" ></ShopAccountDrawer>

    </a-row>
  </div>
</template>
<script lang="ts" setup name="shop">
import { reactive } from 'vue';

import { BasicTable, TableAction,ActionItem } from '@apps/antd-admin/src/components/Table';
import { Api } from './data/api';
import { useDrawer } from '@apps/antd-admin/src/components/drawer';
import Drawer from './components/drawer.vue';
import ShopWechatSetDrawer from './components/ShopWechatSetDrawer.vue';
import { PageWrapper } from '@apps/antd-admin/src/components/Page';

import { columns, searchFormSchema } from './data/data';
import { useBaseTable } from '@apps/antd-admin/src/hooks';
import ShopCateGoryTree from "./components/ShopCateGoryTree.vue";
import ShopAccountDrawer from "./components/ShopAccountDrawer.vue";


const [registerDrawer, { openDrawer }] = useDrawer();
const [registerShopAccountDrawer, { openDrawer: openShopAccountDrawer }] = useDrawer();
const [registerShopWechatSetDrawer, { openDrawer: openShopWechatSetDrawer }] = useDrawer();
const searchInfo = reactive<Recordable>({});
const { prefixCls, tableContext, handleDelete, handleSuccess, handlePost } = useBaseTable({
  designScope: 'shop-template',
  tableProps: {
    //表格标题
    title: '商家列表',
    //主键字段
    rowKey: 'shopId',
    handlerName:"adminShopListHandler",
    //列表接口
    listUrl: Api.page,
    //删除接口
    delUrl: Api.remove,
    //列定义
    columns,
    canResize:true,
    //查询表单配置
    formConfig: {
      labelWidth: 120,
      schemas: searchFormSchema,
    },
/*    clickToRowSelect: false,*/
    rowSelection: {
      type: 'radio',
      getCheckboxProps(record: Recordable) {
        if (record.shopAccount !== '') {
          return { disabled: true }
        } else {
          return { disabled: false }
        }
      },
    },
    //操作列配置
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
  },
});

const [registerTable, { reload }, { rowSelection, hasSelectedRows, selectedRow }] = tableContext;

const btnState = reactive({
  disableHandleCreate: true,
});

function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
    airportId: searchInfo.airportId,
  });
}
/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '删除',
      popConfirm: {
        title: '是否确认删除',
        icon: 'ant-design:delete-outlined',
        confirm: handleDelete.bind(null, record),
      },
    },
  ];
}
function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

function handleWechatSet(record: Recordable) {
  openShopWechatSetDrawer(true, {
    record,
    isUpdate: true,
  });
}
function handleOpenAccount(record:any) {
  openShopAccountDrawer(true, {
    record,
    isUpdate: false,
  });
}

function handleSelect(shopGroup) {
  btnState.disableHandleCreate = false;
  searchInfo.shopGroup = shopGroup;
  console.info('searchInfo', searchInfo);
  reload();
}
</script>
